<template>
  <div>
    <!-- 面包屑组件 -->
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 50px"
    >
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/editpost' }"
        >发布文章</el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- 标题 -->
    <el-form ref="form" :model="form" label-width="40px">
      <el-form-item label="标题">
        <el-input v-model="form.title" style="width: 460px"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <VueEditor
          class="editor"
          v-model="form.content"
          :useCustomImageHandler="true"
          @image-added="imgUpload"
        />
      </el-form-item>
      <el-form-item label="栏目">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in categoryList"
            :key="item.id"
            :label="item.id"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
          list-type="picture-card"
          class="avatar-uploader"
          :action="$axios.defaults.baseURL + '/upload'"
          :on-success="coverSuccess"
          :on-remove="coverRemove"
          :file-list="form.cover"
          :headers="{
            Authorization: 'Bearer ' + token,
          }"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor,
  },
  watch: {
    checkList() {
      this.form.categories = this.checkList.map((item) => {
        return { id: item };
      });
    },
  },
  data() {
    return {
      token: localStorage.getItem("token"),
      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
      checkList: [],
      categoryList: [],
    };
  },
  created() {
    //判断到底是新增还是编辑
    if (this.$route.query.id) {
      this.$axios({
        url: "/post/" + this.$route.query.id,
      }).then((res) => {
        console.log(res.data.data);
        res.data.data.content = res.data.data.content.replace(/div/g, "p");
        this.checkList = res.data.data.categories.map((item) => {
          return item.id;
        });
        //处理封面图片显示问题
        const oldCover = res.data.data.cover;
        const newCover = oldCover.map((item) => {
          if (item.url.indexOf("http") == -1) {
            item.url = this.$axios.defaults.baseURL + item.url;
          }
          // 强制设定唯一 uid 避免上传组件渲染报错
          item.uid = item.id;
          return item;
        });
        res.data.data.cover = newCover;
        this.form = res.data.data;
      });
    }
    this.$axios({
      url: "/category",
    }).then((res) => {
      //去除关注和头条分类
      // res.data.data.shift();
      // res.data.data.shift();
      this.categoryList = res.data.data.filter((item) => {
        return item.id != 0 && item.id != 999;
      });
      // console.log(this.categoryList);
    });
  },
  methods: {
    coverSuccess(res, file) {
      // console.log(res.data.url);
      // console.log(file);
      file.id = res.data.id;
      this.form.cover.push(file);
    },
    coverRemove(file, fileList) {
      // console.log("三处成功");
      this.form.cover = fileList;
    },
    imgUpload(file, Editor, cursorLocation, resetUploader) {
      let data = new FormData();
      data.append("file", file);
      this.$axios({
        method: "post",
        url: "/upload",
        headers: {
          Authorization: this.token,
        },
        data,
      }).then((res) => {
        const url = this.$axios.defaults.baseURL + res.data.data.url;
        // 2. 上传完毕, 进入 then 后, 将图片作为 img 标签, 放入到编辑器的 content 内容当中
        Editor.insertEmbed(cursorLocation, "image", url);
        resetUploader();
      });
    },
    onSubmit() {
      console.log(this.form);
      // console.log(this.checkList);
      this.$axios({
        method: "post",
        url: "/post",
        data: this.form,
      }).then((res) => {
        console.log(res.data);
        if (res.data.message == "文章发布成功") {
          this.$message.success("文章发布成功");
          this.$router.push("/postList");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.editor {
  line-height: initial;
}
</style>